<template>
    <view class="globe_back">
        <z-paging ref="paging" v-model="list" @query="queryList">
            <view slot="top">
                <view class="box">
                    <view class="flex tipbox">
                        <u-tabs
                            :list="orderTypes"
                            :current="orderType.index"
                            @click="changeOrderType"
                            :activeStyle="{ color: '#000000', background: '#FFFFFF', padding: '3px 5px' }"
                            :inactiveStyle="{ color: '#606266', padding: '3px 5px' }"
                        ></u-tabs>
                    </view>
                    <view class="flex scroll">
                        <u-tabs
                            :list="statusTypes"
                            :current="statusType.index"
                            @click="changeStatusType"
                            :activeStyle="{ color: '#3377FF' }"
                            :inactiveStyle="{ color: '#606266' }"
                        ></u-tabs>
                    </view>
                </view>
            </view>
            <view class="box" style="padding-bottom: 32rpx">
                <view class="list" v-for="item in orderList">
                    <lz-order-item :item="item" :type="orderType.type" @handleGetOrderList="handleGetOrderList"></lz-order-item>
                </view>
            </view>
        </z-paging>
    </view>
</template>

<script>
import lzOrderItem from '@/components/lz-order-item/lz-order-item';
import { getOrderList } from '@/api';
export default {
    components: {
        lzOrderItem
    },
    data() {
        return {
            orderType: { name: '商城', id: 1, type: 'goods', index: 0 },
            orderTypes: [
                { name: '商城', id: 1, type: 'goods' },
                { name: '租车', id: 2, type: 'lease' },
                { name: '服务', id: 3, type: 'service' },
                { name: '拖车', id: 4, type: 'rescue' },
                { name: '开锁', id: 5, type: 'lock' }
            ],
            type: 0, //0待发货，1待收货，2已完成，3售后中
            ProductType: 1, //0普通商品，1电池
            list: [],
            orderList: [],
            statusType: {
                name: '全部',
                id: 1,
                index: 0
            },
            statusTypes: [
                { name: '全部', id: 1 },
                { name: '待支付', id: 2 },
                { name: '待接单', id: 3 },
                { name: '进行中', id: 4 },
                { name: '已完成', id: 5 },
                { name: '售后', id: 6 }
            ],
            statusTypeMap: [
                [
                    { name: '全部', id: 1 },
                    { name: '待支付', id: 2 },
                    { name: '待发货', id: 3 },
                    { name: '待收货', id: 4 },
                    { name: '已完成', id: 5 },
                    { name: '售后', id: 6 }
                ],
                [
                    { name: '全部', id: 1 },
                    { name: '待支付', id: 2 },
                    { name: '待提车', id: 3 },
                    { name: '使用中', id: 4 },
                    { name: '已完成', id: 5 },
                    { name: '售后', id: 6 }
                ],
                [
                    { name: '全部', id: 1 },
                    { name: '待支付', id: 2 },
                    { name: '待接单', id: 3 },
                    { name: '进行中', id: 4 },
                    { name: '已完成', id: 5 },
                    { name: '售后', id: 6 }
                ],
                [
                    { name: '全部', id: 1 },
                    { name: '待支付', id: 2 },
                    { name: '待接单', id: 3 },
                    { name: '进行中', id: 4 },
                    { name: '已完成', id: 5 },
                    { name: '售后', id: 6 }
                ],
                [
                    { name: '全部', id: 1 },
                    { name: '待支付', id: 2 },
                    { name: '待接单', id: 3 },
                    { name: '进行中', id: 4 },
                    { name: '已完成', id: 5 },
                    { name: '售后', id: 6 }
                ]
            ],
            page: {
                page: 1,
                size: 10
            }
        };
    },
  onLoad({ type }) {

        const orderTypeItemIndex = this.orderTypes.findIndex((item) => item.id == type);
        const orderTypeItem = this.orderTypes[orderTypeItemIndex];
        if (orderTypeItem) {
            this.changeOrderType({ ...orderTypeItem, index: orderTypeItemIndex });
        }
    },
    onShow() {
        // this.handleGetOrderList();
    },
    methods: {
        handleGetOrderList() {
			console.log(1)
			this.$.ajax(1, "POST", "users/rider_order_list", {
					product_type:this.orderType.index,
					status:this.statusType.index,
					page:1,
					pagesize:10,
					lat:39.666,
					lng:116.777
				}, (res) => {
					if(res.code==200){
						console.log(res.data)
						 this.orderList = res.data;
					}else{
						this.$.ti_shi(res.msg)
					}
				})
			 //    this.type=e.type
				// this.id=e.id
			// }
            // getOrderList({ mode: this.orderType.id, page: 1, size: 10, type: this.statusType.id, ...args }).then((res) => {
            //     const {
            //         data: { items }
            //     } = res;
            //     this.orderList = items;
            //     this.$refs.paging.complete(items);
            // });
        },
        changeOrderType(item) {
			// console.log(item);return;
            const { id, index, name, type } = item;
            this.orderType = { id, index, name, type };
            const statusItem = this.statusTypeMap[index];
			// console.log(statusItem)
            if (statusItem) {
                this.statusTypes = statusItem;
                this.changeStatusType({ ...statusItem[0], index: 0 });
            }
        },
        changeStatusType(item) {
            const { id, index, name } = item;
            this.statusType = { id, index, name };
            this.handleGetOrderList();
        },
        buy() {
            uni.navigateTo({
                url: '/pages/me/MyOrder/MallToBePaid'
            });
        },
        CancelOrder() {
            uni.navigateTo({
                url: '/pages/me/MyOrder/CancelOrder'
            });
        },
        orderInfo() {
            uni.navigateTo({
                url: '/pages/me/MyOrder/BatteryToBePaid'
            });
        },
        isRouter(url) {
            this.$api.auth(url);
        },
        click1(e) {
            console.log('click1', e);
            if (e == 0) {
                uni.navigateTo({
                    url: '/pages/business/order'
                });
            }
            if (e == 2) {
                uni.navigateTo({
                    url: '/pages/business/business'
                });
            }
        },

        // 待发货详情
        details(type) {
            console.log(1);
            if (this.ProductType == 0) {
                uni.navigateTo({
                    url: '/pages/me/MyOrder/MallToBePaid?type=' + type
                });
            }
            if (this.ProductType == 1) {
                uni.navigateTo({
                    url: '/pages/me/MyOrder/BatteryCompleted'
                });
            }
        },
        // 售后详情
        details1() {
            uni.navigateTo({
                url: '/pages/business/AfterSales'
            });
        },
        // 查看评价
        evaluea() {
            uni.navigateTo({
                url: '/pages/me/MyOrder/orderEvaluation'
            });
        },
        // 查看物流
        loginst() {
            console.log(1);
            uni.navigateTo({
                url: '/pages/business/LogisticsInformation'
            });
        },
        add() {
            uni.navigateTo({
                url: '/pages/business/addProduct'
            });
        },
        add_zc() {
            uni.navigateTo({
                url: '/pages/business/CarRental'
            });
        },
        // pageNo 页数 pageSize 单页显示数量
        queryList(page = 1, size = 10) {
            //模拟数据
            this.handleGetOrderList({ page, size });
            // getOrderList({ mode: this.orderType.id }, page, size).then((res) => {
            //   const {
            //     data: { items },
            //   } = res;
            //   console.log("items", items);
            //   this.orderList = items;
            //   this.$refs.paging.complete(items);
            // });
            // 分页停止
            // if (pageNo >= 5) {
            //   this.$refs.paging.complete(false);
            // }
        },
        // 重新加载分页
        reload() {
            this.$refs.paging.reload();
        }
    }
};
</script>

<style scoped lang="scss">
/deep/.u-tabs__wrapper__nav__line {
    display: none;
}
.scroll{
	 overflow-x: scroll;
}
.list {
    background-color: #f7faff;
}

.nameTitle {
    text-align: center;
}

.storeImg {
    width: 48rpx;
    height: 48rpx;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    margin-right: 8rpx;
}

.name {
    width: 574rpx;
    height: 92rpx;
    line-height: 92rpx;
    padding: 0 24rpx;
    margin-top: 10px;
}

.nameBtn {
    width: 298rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    display: inline-block;
    margin-top: 64rpx;
}

.userInfo {
    background: #f7f7f7;
    border-radius: 16rpx;
    font-size: 28rpx;
    padding: 8rpx 24rpx;
    margin-top: 26rpx;

    .info {
        padding: 8rpx 0;
    }
}

.listTitle {
    width: 400rpx;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.box {
    padding: 0 32rpx 32rpx;
    .list {
        background: white;
        border-radius: 24rpx;
        margin-top: 24rpx;
        padding: 0 24rpx;
        display: block;
        overflow: hidden;
    }
    .shopImg {
        width: 200rpx;
        height: 200rpx;
        border-radius: 16rpx;
        margin-right: 24rpx;
    }
    .tipbox {
        background: #f7f7f7;
        border-radius: 8rpx;
        color: #666b75;
        font-size: 28rpx;
        padding: 8rpx;
    }
    .tip {
        padding: 16rpx;
        border-radius: 8rpx;
    }
    .tipActive {
        background: white;
        color: #00091a;
        padding: 16rpx;
        border-radius: 8rpx;
    }
    .tab {
        color: #999ca3;
        font-size: 28rpx;
        margin: 19rpx;
    }
    .tabActive {
        color: #3377ff;
        font-size: 32rpx;
        margin: 19rpx;
        font-weight: bold;
    }
    .btn {
        height: 68rpx;
        line-height: 68rpx;
        padding: 0 30rpx;
        text-align: center;
        border: 2rpx solid #ccced1;
        border-radius: 16rpx;
        margin: 0 12rpx;
        font-size: 28rpx;
    }
}
</style>
